<template>
	<view class="circle">
		<custom-navi :show-home="false">行政区<view class="putin" @click="upData">提交</view></custom-navi>
		<view class="sideNav">
			<scroll-view scroll-y="true" class="sideNav-primary">
				<view v-for="(item,index) in circleData" :key='index' @click="district(index)" class="sideNav-primary-txt" :class="{reveal:status===index}">
					{{item.areaName}}
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="sideNav-secondary">
				<view v-for="(item,index) in areaData" :key='index' @click="streetBtn(index)"  class="sideNav-secondary-list" :class="{reveal:street===index}">
					{{item.areaName}}
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getAreaOrStreet } from '../../api'
	export default {
		data(){
			return {
				status:'',
				street:'',
				circleData:[
					{areaName:'无合适商圈'}
				],
				areaData:[],
				shopInfo:'',
				cityCode:'',
				areaCode:'',
				siteData:'',
				streetData:'',
			}
		},
		onLoad() {
			const _self = this
			 uni.getStorage({
			   key: 'shopInfo',
			   success: function (res) {
			     _self.shopInfo = res.data
			   }
			 });
			this.location()
			this.formData()
		},
		methods:{
			upData(){
				// console.log(this.streetData)
				// console.log(this.siteData)
				const params = {
					streetCode:this.streetData.code,
					areaCode:this.siteData.code,
					siteName:`${this.siteData.areaName || ''} ${this.streetData.areaName || ''}`
				}
				console.log(params)
				uni.setStorageSync('streetData', params)
				this.$utils.common.toast.fail("已提交");
				setTimeout(() => {
				  return this.$utils.common.navigateBack()
				}, 1000)
			},
			streetBtn(index){
				this.street = index
				// console.log(this.areaData[index])
				this.streetData = this.areaData[index]
			},
			async district(index){
				console.log(index)
				
				if(this.status==index){
					
				}else{
					this.status=index
					this.street = ''
					this.siteData = this.circleData[index]
					let params={
								parentCode:this.circleData[index].code
							}
					try {
					  const { data } = await getAreaOrStreet(params)
					  console.log(data)
					  this.areaData=data
					} catch (err) {
					  if (err.code) {
					    if (err.code !== 200) {
					      return this.$utils.common.toast.fail(err.data.message);
					    }
					    return this.$utils.common.toast.fail(err.errMsg);
					  }
					}
				}
				
				
			},
			location(){
				this.cityCode=this.shopInfo.cityCode
				this.areaCode=this.shopInfo.areaCode
			},
			async formData(){
				let params={
							parentCode:this.cityCode
						}
				try {
				  const { data } = await getAreaOrStreet(params)
				  // console.log(data)
				  for( var i = 0; i<data.length; i++){
					this.circleData.push(data[i])
				  }
				  
				  console.log(this.circleData)
				} catch (err) {
				  if (err.code) {
				    if (err.code !== 200) {
				      return this.$utils.common.toast.fail(err.data.message);
				    }
				    return this.$utils.common.toast.fail(err.errMsg);
				  }
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.putin{
		  position: absolute;
		  top: 0;
		  right: 32rpx;
		  font-size:30rpx;
		  font-family:PingFang SC;
		  font-weight:500;
		  color:rgba(255,255,255,1);
		  opacity:1;
		  line-height: 44rpx;
	  }
	.sideNav{
		display: flex;
		view{
			flex: 1;
		}
		&-primary{
			// height: 100vh;
			height: 93vh;
			background-color: rgba(243, 244, 248, 1);
			&-txt{
				color: rgba(153, 153, 153, 1);
				padding: 32rpx 42rpx;
				// background:rgba(255,255,255,1);
				opacity:1;
				font-size:32rpx;
				font-family:PingFang SC;
				font-weight:400;
			}
			.reveal{
				font-size:32rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(12,212,211,1);
				opacity:1;
				background:rgba(255,255,255,1);
				opacity:1;
			}
		}
		&-secondary{
			height: 93vh;
			background-color: #ffffff;
			&-list{
				padding: 32rpx 42rpx;
				background:rgba(255,255,255,1);
				opacity:1;
				font-size:32rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(112,112,112,1);
				opacity:1;
				border-bottom: 1rpx solid rgba(230, 230, 230, 1);
			}
			.reveal{
				font-size:32rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(12,212,211,1);
				opacity:1;
				background:rgba(255,255,255,1);
				opacity:1;
			}
		}
	}
</style>
